<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            width: 180px;
            height: 180px;
            background: gold;
            margin: 100px auto;
            padding: 30px;
            border-radius: 50%;
        }

        .outer .center {
            width: 130px;
            height: 130px;
            padding: 30px;
            background: pink;
            border-radius: 50%;
        }

        .outer .center .inner {
            width: 130px;
            height: 130px;
            background: rgb(199, 237, 204);
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <!--
    capture修饰符是对事件捕获的监听，vue的事件监听，默认都是获取冒泡阶段的，所以使用capture去监听捕获阶段的事件
    不添加capture时,冒泡是 内->中->外
    添加了capture时,冒泡是 外->中->内
    因为事件捕获是优先于冒泡机制的
    -->
    <div class="outer" @click.capture="outer">
        <div class="center" @click.capture="center">
            <div class="inner" @click="inner"></div>
        </div>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        methods: {
            outer() {
                alert("命中外层")
                console.log("外层")
            },
            center() {
                alert("命中中间层")
                console.log("中间")
            },
            inner(event) {
                alert("命中内层")
                console.log("内层")
            }
        }
    })
</script>
</body>
</html>